<template>
<div class="anaylsis-main">
  <xdh-grid-layout class="" :layout="layout" fit-row>
    <div class="grid-item a" slot="a">
      <el-radio-group class="top"  size="mini">
        <el-radio-button label="警情"></el-radio-button>
        <el-radio-button label="受案" disabled ></el-radio-button>
        <el-radio-button label="立案"></el-radio-button>
        <el-radio-button label="破案"></el-radio-button>
      </el-radio-group>
      <div class="center">
        <h1>56</h1>
        <p>年同比 12％; 月环比 11％</p>
      </div>
      <div class="bottom">
        今年警情: 2,423; 本月警情: 650
      </div>
    </div>

    <div class="grid-item b" slot="b">
      <el-radio-group class="top"  size="mini">
        <el-radio-button label="警情"></el-radio-button>
        <el-radio-button label="受案" disabled ></el-radio-button>
        <el-radio-button label="立案"></el-radio-button>
        <el-radio-button label="破案"></el-radio-button>
      </el-radio-group>
      <div class="center">
        <h1>56</h1>
        <p>年同比 12％; 月环比 11％</p>
      </div>
      <div class="bottom">
        今年警情: 2,423; 本月警情: 650
      </div>
    </div>

    <div class="grid-item c" slot="c">c</div>

    <div class="grid-item d" slot="d">
      <div class="left">
        <xdh-info-box  
          title="现场必勘"  :number="100" icon="iconfont icon-card-solid">
          <el-progress  :percentage="68" :width="50"></el-progress> 
        </xdh-info-box>
      </div>
      <div class="right">
        <xdh-info-box  
          title="现场必勘"  :number="100" icon="iconfont icon-card-solid">
          <el-progress  :percentage="68" :width="50"></el-progress> 
        </xdh-info-box>
      </div>
    </div>

    <div class="grid-item e" slot="e">
      <case-type-proportion></case-type-proportion>
    </div>

    <div class="grid-item f" slot="f">
      <performance-rank></performance-rank>
    </div>

    <div class="grid-item g" slot="g">
      <case-analysis></case-analysis>
    </div>

    <div class="grid-item h" slot="h">
      <case-statistic></case-statistic>
    </div>

    <div class="grid-item i" slot="i">
      <total-source></total-source>
    </div>

  </xdh-grid-layout>
</div>
</template>

<style lang="scss" scoped>
@import '../../../style/_vars.scss';
.anaylsis-main{
  .grid-item{
    height: 100%;
    // background: white;
  }
  .grid-item.a, .grid-item.b{
    display:flex;
    flex-flow: column;
    padding: 5px;
    align-items: center;
    background: white;
    .top{
      flex: 0 0 auto;
    }
    .center{
      flex: 1;
    }
    .bottom{
      flex: 0 0 auto;
      width: 100%;
      line-height:2;
      border-top: 1px solid $--border-color-base;
    }
  }
  .grid-item.c{
    background: transparent;
  }

  .grid-item.d{
    display:flex;
    flex-flow: row nowrap;
    align-items:center;
    background: white;
    .left, .right{
      flex: 1;
      padding: 5px;
    }
  }
}


</style>

<script>
import XdhGridLayout from '@/widgets/xdh-grid-layout'
import XdhInfoBox from '@/widgets/xdh-info-box'
import CaseTypeProportion from './case-type-proportion'
import TotalSource from './total-source'
import CaseStatistic from './case-statistic'
import CaseAnalysis from './case-analysis'
import PerformanceRank from './performance-rank'
export default {
  name: 'anaylsisMain',
  components: {
    XdhGridLayout,
    XdhInfoBox,
    CaseTypeProportion,
    TotalSource,
    CaseStatistic,
    CaseAnalysis,
    PerformanceRank
  },
  props: {},
  data() {
    return {
      layout: [
        {'x': 0, 'y': 0, 'w': 1.6, 'h': 1.2, 'i': 'a'},
        {'x': 1.6, 'y': 0, 'w': 1.6, 'h': 1.2, 'i': 'b'},
        {'x': 3.2, 'y': 0, 'w': 5.6, 'h': 3.6, 'i': 'c'},
        {'x': 8.8, 'y': 0, 'w': 3.2, 'h': 1, 'i': 'd'},

        {'x': 0, 'y': 1.2, 'w': 3.2, 'h': 2.4, 'i': 'e'},
        {'x': 8.8, 'y': 1, 'w': 3.2, 'h': 2.6, 'i': 'f'},

        {'x': 0, 'y': 3.6, 'w': 3.2, 'h': 2.4, 'i': 'g'},
        {'x': 3.2, 'y': 3.6, 'w': 5.6, 'h': 2.4, 'i': 'h'},
        {'x': 8.8, 'y': 3.6, 'w': 3.2, 'h': 2.4, 'i': 'i'}
      ]
    }
  },
  computed: {
    
  },
  methods: {
    
  },
  mounted() {
  }
}
</script>

